<template>
  <view class="employee-page" style="background-color: #f5f9ff; min-height: 100vh;">
   

    <!-- 标题栏 -->
    <view style="padding: 15px; text-align: center;">
      <text style="font-size: 18px; font-weight: bold;">员工管理</text>
    </view>

    <!-- 员工列表区域 -->
    <view style="padding: 0 15px;">
      <!-- 白色背景框（包含列表标题和搜索按钮） -->
      <view style="background-color: #fff; border-radius: 8px; overflow: hidden; margin-bottom: 10px;">
        <!-- 列表标题和搜索按钮 -->
        <view style="padding: 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f5f5f5;">
          <text style="font-size: 14px; color: #333; font-weight: bold;">员工列表</text>
          <!-- 搜索按钮 -->
          <view @click="showSearch = true" style="width: 20px; height: 20px; position: relative;">
            <view style="position: absolute; top: 0; left: 0; width: 12px; height: 12px; border: 2px solid #666; border-radius: 50%;"></view>
            <view style="position: absolute; top: 14px; left: 14px; width: 6px; height: 2px; background-color: #666; transform: rotate(45deg);"></view>
          </view>
        </view>
        
        <!-- 员工列表 -->
        <navigator 
          v-for="(employee, index) in filteredEmployees" 
          :key="index" 
          :url="'/pages/b/manager/04/employee_detail?id=' + employee.id"
          style="padding: 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f5f5f5;">
          
          <view style="display: flex; align-items: center;">
            <!-- 员工头像 -->
            <view style="width: 40px; height: 40px; background-color: #e6f0ff; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 10px;">
              <text style="color: #1a73e8; font-size: 16px;">{{employee.id}}</text>
            </view>
            <view>
              <text style="font-size: 16px; display: block;">{{employee.id}}号收银员</text>
              <text style="font-size: 16px; font-weight: 500;">{{employee.name}}</text>
            </view>
			<!--这个右边对齐没试出来-->
			<view>
			  <text style="font-size: 16px; font-weight: bold; display: block;text-align: right;">{{employee.revenue.toLocaleString()}}.00</text>
			  <text style="font-size: 12px; color: #999;text-align: right;">今日收益</text>
			</view>
          </view>
          
        
        </navigator>
      </view>
    </view>

    <!-- 搜索弹窗 -->
    <view v-if="showSearch" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center;">
      <view style="background-color: #fff; width: 80%; border-radius: 8px; padding: 20px;">
        <text style="font-size: 16px; font-weight: bold; display: block; margin-bottom: 15px;">搜索员工</text>
        
        <!-- 搜索输入框 -->
        <input 
          type="text" 
          placeholder="请输入员工姓名或编号" 
          v-model="searchText"
          style="border: 1px solid #eee; border-radius: 4px; padding: 10px; margin-bottom: 15px; width: 100%;"
          @input="filterEmployees">
        
        <!-- 操作按钮 -->
        <view style="display: flex; justify-content: space-between;">
          <view 
            style="flex: 1; background-color: #f5f5f5; border-radius: 4px; padding: 10px; margin-right: 10px; text-align: center;"
            @click="showSearch = false">
            <text style="color: #666;">取消</text>
          </view>
          <view 
            style="flex: 1; background-color: #1a73e8; border-radius: 4px; padding: 10px; text-align: center;"
            @click="confirmSearch">
            <text style="color: #fff;">搜索</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      employees: [
        { id: 1, name: '王丽丽', revenue: 23452345 },
        { id: 2, name: '赵英', revenue: 152340 },
        { id: 3, name: '白巧乐', revenue: 345 },
        { id: 4, name: '王俊', revenue: 45 },
        { id: 5, name: '白巧乐', revenue: 52345 },
        { id: 6, name: '王丽华', revenue: 452345 }
      ],
      filteredEmployees: [],
      showSearch: false,
      searchText: ''
    }
  },
  created() {
    this.filteredEmployees = [...this.employees]
  },
  methods: {
    filterEmployees() {
      if (!this.searchText) {
        this.filteredEmployees = [...this.employees]
        return
      }
      const search = this.searchText.toLowerCase()
      this.filteredEmployees = this.employees.filter(emp => 
        emp.name.toLowerCase().includes(search) || 
        emp.id.toString().includes(search)
      )
    },
    confirmSearch() {
      this.showSearch = false
    }
  }
}
</script>

<style>
.employee-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
              Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
</style>